<template>
  <el-space>
    <el-button @click="handleClick" type="primary">
      test
    </el-button>
    <el-icon v-if="state.choiceIcon && state.choiceIcon.length>0">
      <component :is="state.choiceIcon"></component>
    </el-icon>
  </el-space>
  <div class="rc-choose-icon-dialog-body-height">
    <el-dialog :title="state.title" v-model="state.visible">
      <!-- 利用Object.keys快速拿到对象身上所有的键，并且返回一个数组 -->
      <!-- 利用element的滚动条组件优化滚动条样式 -->
      <!-- <el-scrollbar class="container" height="400px"> -->
      <div class="container">
        <div
            class="item"
            v-for="(item, index) in state.iconList"
            :key="index"
            @click="clickItem(item)"
        >
          <div>
            <!-- vue3-动态组件 -->
            <!-- is可以直接传递标签 -->
            <component :is="`${item}`"></component>
          </div>
          <div class="text">{{ item }}</div>
        </div>
      </div>
      <!-- </el-scrollbar> -->
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name='IconSelector'>

import {useCopy} from "@/utils/copyText";

const state = reactive({
  // 弹出框的标题
  title: '图标列表',
  // 控制弹窗框的显示与隐藏
  visible: false,
  iconList: ['Switch', 'Edit', 'Filter', 'Plus', 'Message', 'Bell'],
  choiceIcon: '',
})


// 点击按钮，显示弹出框
const handleClick = () => {
  // 需要修改父组件的数据
  state.visible = !state.visible
};

// 点击图标
const clickItem = (item: string) => {
  let text = `${item}`;
  // 复制文本
  useCopy(text);
  state.choiceIcon = item
  // 关闭弹窗
  state.visible = false;
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .item {
    width: 20%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 24px;
    cursor: pointer;
  }

  svg {
    width: 2em;
    height: 2em;
  }

  .text {
    font-size: 12px;
  }
}
</style>
